<template>
  <div class="ccss-gas-charts">
    <a-card :class="['common-card flex']" title="化学品">
      <div class="chart-box" v-for="(item, index) in ccssChartDatas" :key="index">
        <Line class="chart" :chartData="item" :title="item.yaxisList[0]?.machineName" />
      </div>
    </a-card>
    <a-card :class="['common-card flex']" title="气体">
      <div class="chart-box" v-for="(item, index) in gasChartDatas" :key="index">
        <Line class="chart" :chartData="item" :title="item.yaxisList[0]?.machineName" />
      </div>
    </a-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, defineProps, Ref, defineExpose } from 'vue'
import { selectCcssEmissionData, selectCcssConsumptionData } from '@/api/common/chart';
import Line from '@/components/Charts/Line/index.vue'
const ccssChartDatas: Ref<any[]> = ref([])
const gasChartDatas: Ref<any[]> = ref([])
const props = defineProps({
  classifyId: {
    type: String,
    default: ''
  }
})
const getCcssData = async (searchInfo, classifyIds:any[] = []) => {
  let fns:any = []
  ccssChartDatas.value = []
  fns = classifyIds.map(classifyId => selectCcssConsumptionData({
    startDay: searchInfo.startDay,
    endDay: searchInfo.endDay,
    queryType: searchInfo.queryType,
    classifyId: classifyId.itemCode,
  }))
  Promise.all(fns).then(res => {
    res = res.map(item => {
      if (item.yaxisList.length) {
        item.yaxisList = item.yaxisList.map(_item => ({..._item, name: _item.chemicalName}))
      }
      return item
    })
    ccssChartDatas.value.push(...res)
    console.log(ccssChartDatas, 'ccssChartDatas')
  })  
}
const getGasData = async (searchInfo, classifyIds:any[] = []) => {
  let fns:any = []
  gasChartDatas.value = []
  fns = classifyIds.map(classifyId => selectCcssEmissionData({
    startDay: searchInfo.startDay,
    endDay: searchInfo.endDay,
    queryType: searchInfo.queryType,
    classifyId: classifyId.itemCode,
  }))
  Promise.all(fns).then(res => {
    res = res.map(item => {
      if (item.yaxisList.length) {
        item.yaxisList = item.yaxisList.map(_item => ({..._item, name: _item.chemicalName}))
      }
      return item
    })
    gasChartDatas.value.push(...res)
  })  
}
const getData = (searchInfo, classifyIdsObj: {ccssClassifyIds: any[], gasClassifyIds:any[]}={ccssClassifyIds:[],gasClassifyIds:[]}) => {
  getCcssData(searchInfo, classifyIdsObj.ccssClassifyIds)
  getGasData(searchInfo, classifyIdsObj.gasClassifyIds)
}

defineExpose({getData})
</script>

<style scoped lang="scss">
.ccss-gas-charts{
  height: 100%;
  flex-direction: column;
  overflow: auto;
}
.common-card {
  overflow: hidden;
  flex-shrink: 1;
  height: 100%;
  &.list-more {
    :deep(.ant-card-body) {
      overflow: auto !important;
    }

    .chart-box {
      height: 45% !important;
      min-height: 300px;
    }
  }

  :deep(.ant-card-body) {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    padding: 4px;
    overflow: hidden;

    .chart-box {
      flex-shrink: 0;
      width: 50%;
      height: 50%;
      min-height: 240px;
      padding: 4px;
    }
  }
}
</style>